<template>
    <a-layout>
        <a-layout-header style="background: #fff; padding: 0"/>
        <a-layout-content style="margin: 0 16px">
            <a-breadcrumb style="margin: 16px 0">
                <a-breadcrumb-item>首页</a-breadcrumb-item>
                <a-breadcrumb-item>项目列表</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="toolsbar">
                <div style="float: left;margin-left: 20px;margin-top: 10px;">
                    <a-button @click="addadmin()" type="primary">新建项目</a-button>
                    <a-button :loading="loading" @click="start" style="margin-left: 20px" type="primary">
                        刷新
                    </a-button>
                </div>
                <div class="serach_input">
                    <a-input-group compact>
                        <a-select defaultValue="用户名">
                            <a-select-option value="username">用户名</a-select-option>
                            <!--                    <a-select-option value="username">用户名</a-select-option>-->
                        </a-select>
                        <a-input-search @search="onSearch" defaultValue enterButton style="width: 64%"/>
                    </a-input-group>
                </div>
            </div>

            <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                <!--                                {{data}}-->

                <a-table
                        :columns="columns"
                        :dataSource="data"
                        :loading="loading"
                        :pagination="pagination"
                        bordered
                        rowKey="uid"
                >
                    <template slot="interval_type" slot-scope="text, index" style="text-align: center">
                        <a-tag :color="'red'" v-if="index.interval_type === -1"><span>不提醒</span></a-tag>
                        <a-tag :color="'green'" v-if="index.interval_type === 1">每天</a-tag>
                        <a-tag :color="'green'" v-if="index.interval_type === 2">每周</a-tag>
                    </template>
                    <template slot="contents" slot-scope="text" style="text-align: center">
                        <a-list size="small" bordered :data-source="text">
                            <a-list-item slot="renderItem" slot-scope="text, index">
                                [{{ text.id }}]{{ text.label_value }}
                            </a-list-item>
<!--                            <div slot="header">-->
<!--                                id:描述-->
<!--                            </div>-->
<!--                            <div slot="footer">-->
<!--                                Footer-->
<!--                            </div>-->
                        </a-list>
                    </template>
                    <template slot="is_default" slot-scope="text, index" style="text-align: center">
<!--                        <a-tag :color="'red'" v-if="index.is_default === -1"><span>不提醒</span></a-tag>-->
                        <a-tag :color="'green'" v-if="index.is_default === 1">默认</a-tag>
                        <a-tag :color="'red'" v-if="index.is_default === 2">非默认</a-tag>
                    </template>
                    <template slot="status" slot-scope="text, index" style="text-align: center">
                        <a-tag :color="'green'" v-if="index.status === 1"><span>正常</span></a-tag>
                        <a-tag :color="'red'" v-if="index.status !== 1">异常</a-tag>
                    </template>
                    <template slot="operation" slot-scope="text, index">
                            <span style="margin-right: 5px;">
                              <a @click="showModal(index)">设置默认</a>
                            </span>
                        <span>
                              <a @click="delok(index)">剔除</a>
                            </span>
                    </template>
                </a-table>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center"></a-layout-footer>
        <a-modal @ok="popok" title="编辑用户信息" v-model="popinfos" width="75%">
            <a-form-model
                    :model="FormModel"
                    ref="FormModel"
                    v-bind="formItemLayoutWithOutLabel"
            >
<!--                {{edit}}-->
<!--                {{FormModel.content_value}}-->
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="标题">
                    <a-input placeholder="请输入打卡标题" v-model="edit.title" disabled=""/>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-input placeholder="请输入提醒时间" v-model="edit.interval_time" disabled=""/>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-radio-group v-model="edit.interval_type" button-style="solid" disabled="">
                        <a-radio-button value="-1">
                            不提醒
                        </a-radio-button>
                        <a-radio-button value="1">
                            每天
                        </a-radio-button>
                        <a-radio-button value="2">
                            每周
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-radio-group v-model="edit.is_default" button-style="solid">
                        <a-radio-button value="1">
                            默认
                        </a-radio-button>
                        <a-radio-button value="2">
                            非默认
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <!--                {{FormModel.content_value}}-->
                <!--                {{FormModel.content_value.length}}-->


                <a-form-model-item
                        :key="index"
                        :label="index === 0 ? '项目' : ''"
                        v-bind="index === 0 ? formItemLayout : {}"
                        v-for="(item, index) in FormModel.content_value"

                >
                    <a-input
                            placeholder="请输入项目标题"
                            style="width: 20%; margin-right: 8px"
                            v-model="item.label_value"
                            @change="onChangeslab(index,item.label_value)"
                            disabled=""
                    />
                    <a-select v-model="item.type" disabled="" style="width: 11%; margin-right: 8px">
                        <a-select-option value="input">
                            输入框
                        </a-select-option>
                        <a-select-option value="number">
                            数字框
                        </a-select-option>
                        <a-select-option value="textarea">
                            文本域
                        </a-select-option>
                    </a-select>
                    <a-input
                            v-if="item.type==='input'"
                            allowClear
                            style="width: 20%; margin-right: 8px"
                            v-model="item.set_init_value"
                            placeholder="请设定默认值 "
                            disabled=""
                    />

                    <a-icon
                            :disabled="FormModel.content_value.length === 1"
                            @click="removeFormModel(item)"
                            class="dynamic-delete-button"
                            type="minus-circle-o"
                            v-if="FormModel.content_value.length > 1"
                    />
                </a-form-model-item>
<!--                <a-form-model-item>-->
<!--                    <a-radio-group button-style="solid"  @change="onChangesFormModel" default-value="input">-->
<!--                        <a-radio-button value="input">-->
<!--                            输入框-->
<!--                        </a-radio-button>-->
<!--                        <a-radio-button value="number" disabled="">-->
<!--                            数字输入框-->
<!--                        </a-radio-button>-->
<!--                        <a-radio-button value="textarea" disabled="">-->
<!--                            文本域-->
<!--                        </a-radio-button>-->
<!--                    </a-radio-group>-->
<!--                    <br/>-->
<!--                    <small>// 表单类型 (text,password,select,date,number,radio,checkbox,switch,textarea,slot) </small>-->
<!--                    <br/>-->
<!--                    <a-button @click="addFormModel" style="width: 60%" type="dashed">-->
<!--                        <a-icon type="plus"/>-->
<!--                        增加新项目-->
<!--                    </a-button>-->
<!--                </a-form-model-item>-->
            </a-form-model>
        </a-modal>
        <a-modal @ok="addok" title="新增项目" v-model="popadd" width="75%">
            <a-form-model
                    :model="FormModel"
                    ref="FormModel"
                    v-bind="formItemLayoutWithOutLabel"
            >
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="标题">
                    <a-input placeholder="请输入打卡标题" v-model="add.title"/>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-input placeholder="请输入提醒时间" v-model="add.interval_time"/>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-radio-group v-model="add.interval_type" button-style="solid"  @change="onChanges">
                        <a-radio-button value="-1">
                            不提醒
                        </a-radio-button>
                        <a-radio-button value="1">
                            每天
                        </a-radio-button>
                        <a-radio-button value="2">
                            每周
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="提醒时间">
                    <a-radio-group v-model="add.is_default" button-style="solid"  @change="onChanges">
                        <a-radio-button value="1">
                            默认
                        </a-radio-button>
                        <a-radio-button value="2">
                            非默认
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
<!--                {{FormModel.content_value}}-->
<!--                {{FormModel.content_value.length}}-->


                <a-form-model-item
                        :key="index"
                        :label="index === 0 ? '项目' : ''"
                        v-bind="index === 0 ? formItemLayout : {}"
                        v-for="(item, index) in FormModel.content_value"

                >
                    <a-input
                            placeholder="请输入项目标题"
                            style="width: 20%; margin-right: 8px"
                            v-model="item.label_value"
                            @change="onChangeslab(index,item.label_value)"
                    />
                    <a-select v-model="item.type" disabled="" style="width: 11%; margin-right: 8px">
                        <a-select-option value="input">
                            输入框
                        </a-select-option>
                        <a-select-option value="number">
                            数字框
                        </a-select-option>
                        <a-select-option value="textarea">
                            文本域
                        </a-select-option>
                    </a-select>
                    <a-input
                            v-if="item.type==='input'"
                            allowClear
                            style="width: 20%; margin-right: 8px"
                            v-model="item.set_init_value"
                            placeholder="请设定默认值 "
                    />

                    <a-icon
                            :disabled="FormModel.content_value.length === 1"
                            @click="removeFormModel(item)"
                            class="dynamic-delete-button"
                            type="minus-circle-o"
                            v-if="FormModel.content_value.length > 1"
                    />
                </a-form-model-item>
                <a-form-model-item>
                    <a-radio-group button-style="solid"  @change="onChangesFormModel" default-value="input">
                        <a-radio-button value="input">
                            输入框
                        </a-radio-button>
                        <a-radio-button value="number" disabled="">
                            数字输入框
                        </a-radio-button>
                        <a-radio-button value="textarea" disabled="">
                            文本域
                        </a-radio-button>
                    </a-radio-group>
                    <br/>
                    <small>// 表单类型 (text,password,select,date,number,radio,checkbox,switch,textarea,slot) </small>
                    <br/>
                    <a-button @click="addFormModel" style="width: 60%" type="dashed">
                        <a-icon type="plus"/>
                        增加新项目
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </a-layout>

</template>

<script>
    const columns = [
        {
            title: "id",
            dataIndex: "id",
            width: "5%",
            scopedSlots: {customRender: "id"}
        },
        {
            title: "标题",
            dataIndex: "title",
            width: "10%",
            scopedSlots: {customRender: "title"}
        },
        {
            title: "提醒类型",
            dataIndex: "interval_type",
            width: "5%",
            scopedSlots: {customRender: "interval_type"}
        },

        {
            title: "重复周期",
            dataIndex: "interval_time",
            width: "5%",
            scopedSlots: {customRender: "interval_time"}
        },
        {
            title: "默认",
            dataIndex: "is_default",
            width: "5%",
            scopedSlots: {customRender: "is_default"}
        },
        {
            title: "打卡值",
            dataIndex: "contents",
            width: "20%",
            scopedSlots: {customRender: "contents"}
        },{
            title: "状态",
            dataIndex: "status",
            width: "5%",
            scopedSlots: {customRender: "status"}
        },

        {
            title: '操作',
            width: "7%",
            key: 'operation',
            scopedSlots: {customRender: 'operation'}
        },
    ];

    import {Modal} from "ant-design-vue";
    import Storage from "../common/storage";
    // import moment from "moment";
    // import * as Util from "../common/util";
    // 导入组件库


    export default {
        name: "Dashboard",
        components: {},
        data() {
            return {
                columns,
                data: [],
                pagination: {
                    pageSize: 10
                },
                popinfos: false,
                popadd: false,
                search_text: "",
                loading: false,
                add: {
                    title: "",
                    interval_time: "1",
                    interval_type: "-1",
                    is_default: "2",
                    rule_content: "",
                },
                edit: {
                    id: "",
                    title: "",
                    interval_time: "",
                    interval_type: "",
                    is_default: "",
                    rule_content: "",
                },
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 4},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 20},
                    },
                },
                formItemLayoutWithOutLabel: {
                    wrapperCol: {
                        xs: {span: 24, offset: 0},
                        sm: {span: 20, offset: 4},
                    },
                },
                FormModel: {
                    content_value: [],

                },
                FormModeltemp:{
                    type:"input",
                    key_code:"",
                    set_init_value:"",
                }
            };
        },
        created() {
            // 获取第一页内容
            this.doSearch(1, this.pagination.pageSize, "");
        },
        methods: {
            start() {
                this.loading = true;
                this.data = [];
                // ajax request after empty completing
                setTimeout(() => {
                    this.loading = false;
                    this.selectedRowKeys = [];
                }, 1000);
                this.doSearch(1, this.pagination.pageSize);
            },

            async onSearch(text) {
                this.data = []
                this.search_text = text;
                this.doSearch(1, this.pagination.pageSize, text);
            },

            async onChange(pagination) {
                await this.doSearch(
                    this.search_text,
                    pagination.current - 1,
                    pagination.pageSize
                );
            },

            async onChanges(e) {
                console.log(e.target.value);
            },
            // async onChange_type(e) {
            //     console.log(e.target.value);
            //     this.edit.interval_type=e.target.value
            // },
            // async onChanges_default(e) {
            //     console.log(e.target.value);
            //     this.edit.is_default=e.target.value
            // },
            async onChangeslab(index,label) {
                console.log(index)
                console.log(label)
                this.FormModel.content_value[index].key_code = label;
            },
            async onChangesFormModel(e) {
                console.log(e.target.value);
                this.FormModeltemp.type= e.target.value;
            },

            showModal(item) {
                console.log(item)
                this.edit.id = item.id;
                this.edit.title = item.title;
                // if (item.interval_time !==""){
                //     this.edit.interval_time = item.interval_time.toString();
                // }else{
                //     this.edit.interval_time = item.interval_time;
                // }
                this.edit.interval_time = Number(item.interval_time).toString();
                this.edit.interval_type = Number(item.interval_type).toString();
                this.edit.is_default = Number(item.is_default).toString();
                this.FormModel.content_value= [];
                this.FormModel.content_value= item.contents;
                this.popinfos = true;
            },
            addadmin() {
                this.add.title = "";
                this.add.interval_time = "";
                this.add.interval_type = "-1";
                this.add.is_default = "2";
                this.FormModel.content_value= [];
                this.FormModeltemp.type = "input"
                this.FormModeltemp.key_code = ""
                this.FormModeltemp.set_init_value = ""
                // this.add.group_id = "";
                this.popadd = true;
            },
            async popok() {
                let now = Date.now();
                let result = await this.$post("/api/admin/signInObject/setDefault", {
                    uid: Storage.uid,
                    token: Storage.token,
                    id: this.edit.id,
                    is_default: this.edit.is_default,
                    t: now,
                });

                if (result.status === true) {
                    this.data = []
                    await this.doSearch(1, this.pagination.pageSize, "");
                    Modal.info({
                        title: "更新成功"
                    });
                }
                this.popinfos = false;
            },
            async addok() {


                if (this.add.title == "") {
                    Modal.warning({
                        title: "请输入项目名称"
                    });
                    this.popinfos = true;
                    return
                }

                let now = Date.now();
                let result = await this.$post("/api/admin/signInObject/create", {
                    uid: Storage.uid,
                    token: Storage.token,
                    save_value: {
                        title: this.add.title,
                        interval_time: this.add.interval_time,
                        interval_type: this.add.interval_type,
                        is_default: this.add.is_default,
                        rule_content: this.add.rule_content,
                        t: now,
                    },
                    content_value: this.FormModel.content_value,
                });

                if (result.status === true) {
                    this.data = []
                    await this.doSearch(1, this.pagination.pageSize, "");
                    Modal.info({
                        title: "创建成功"
                    });
                }
                this.popadd = false;
            },
            async doSearch(page, limit, search) {
                this.loading = true;
                this.data = [];
                console.log(Storage.uid)
                console.log(Storage.token)
                let now = Date.now();
                let result = await this.$get("/api/admin/signInObject/list", {
                    params: {
                        token: Storage.token,
                        uid: Storage.uid,
                        page: page,
                        limit: limit,
                        search: search,
                        t: now,
                    }
                });

                if (result.status === true) {
                    let data = [...this.data];
                    for (let i in result.data.list) {
                        let info = result.data.list[i];
                        // let offset = (parseInt(page) - 1) * limit + parseInt(i);
                        // console.log(offset)

                        data[i] = {
                            id: info.id,
                            title: info.title,
                            interval_type: info.interval_type,
                            interval_time: info.interval_time,
                            contents: info.contents,
                            status: info.status,
                            is_default: info.is_default,
                        };
                    }

                    let pagination = {...this.pagination};
                    pagination.total = result.data.total;
                    this.pagination = pagination;
                    this.data = data;
                    this.loading = false;
                }

                this.loading = false;
            },
            async delok(item) {
                var that = this;
                console.log(item);
                Modal.confirm({
                    title: "警告！",
                    content: "是否确认剔除该项目?",

                    onOk: async function () {

                        let result = await that.$post("/api/admin/signInObject/delete", {

                            uid: Storage.uid,
                            token: Storage.token,
                            id: item.id,
                            // notes: this.edit_pop.notes,
                            t: Date.now(),
                            // sign: Crypt.sign([
                            //     Storage.token,
                            //     this.edit_pop.id,
                            //     JSON.stringify(data),
                            //     this.edit_pop.notes,
                            //     this.$config.secret_key,
                            //     now
                            // ])
                        });
                        console.log(result);
                        if (result.status == true) {
                            console.log("准备弹窗！");
                            that.data = []
                            await  that.doSearch(1, that.pagination.pageSize, "");

                            Modal.info({
                                title: "剔除成功"
                            });
                        }
                        if (result.status === false) {
                            // that.data = []
                            // await this.doSearch(this.page, "1", "", this.estatedefault, "");
                            Modal.info({
                                title: result.msg
                            });
                        }
                    }

                });


            },
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeFormModel(item) {
                let index = this.FormModel.content_value.indexOf(item);
                if (index !== -1) {
                    this.FormModel.content_value.splice(index, 1);
                }
            },
            addFormModel() {
                this.FormModel.content_value.push({
                        label_value: '',
                        type: this.FormModeltemp.type,
                        key_code: '',
                        init_value: '',
                        rule_content: '',
                });
            },
        }
    };
</script>
<style scoped>
    .editable-row-operations a {
        margin-right: 8px;
    }

    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }

    .serach_input {
        width: 25vw;
        float: right;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: right;
        margin-right: 25px;
    }

    .pages {
        float: right;
        margin-top: 10px;
    }

    .toolsbar {
        display: block;
        width: 100%;
        height: 42px;
        background: #fff
    }
</style>
